<template>

  <div id="browse-div" class="full">
    <el-container class="full">
      <el-aside width="100px">
        <resource-tab before-url="/user/record/" class="full"/>
      </el-aside>
      <el-main>
        <el-card v-if="productType=='train'" class="box-card" v-for="record in trainList"
                 :key="record.consumerRecordId">
          <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
            <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
            <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
            <el-descriptions-item label="出发时间">{{ resource.startTime }}</el-descriptions-item>
            <el-descriptions-item label="到达时间">{{ resource.reachTime }}</el-descriptions-item>
            <el-descriptions-item label="出发城市">{{ cityToStr(resource.startCity) }}</el-descriptions-item>
            <el-descriptions-item label="到达城市">{{ cityToStr(resource.destCity) }}</el-descriptions-item>
            <el-descriptions-item label="出发地址">{{ resource.startAddress }}</el-descriptions-item>
            <el-descriptions-item label="到达地址">{{ resource.destAddress }}</el-descriptions-item>
            <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
            <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

            <el-descriptions-item label="订单状态">
              <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                  orderStateStr[record.orderState]
                }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button type="primary" plain @click="showQrcode = true">出示凭证</el-button>
              <el-button
                  type="warning"
                  plain
                  :disabled="record.orderState != 0"
                  @click="cancelOrder(record)"
              >取消订单
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" plain @click="addNewContact('supplier',resource.supplierId)">咨询商家</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" v-if="snapshot.changeTime==null" plain
                         @click="$router.push(`/user/detail/${productTypeStr[resource.productType]}/${resource.trafficId}`)">
                查看商品
              </el-button>
              <el-button type="primary" v-else plain
                         @click="$router.push(`/user/detail/snapshot/${record.snapshotId}`)">
                查看交易快照
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card v-if="productType=='flight'" class="box-card" v-for="record in flightList"
                 :key="record.consumerRecordId">
          <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
            <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
            <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
            <el-descriptions-item label="出发时间">{{ resource.startTime }}</el-descriptions-item>
            <el-descriptions-item label="到达时间">{{ resource.reachTime }}</el-descriptions-item>
            <el-descriptions-item label="出发城市">{{ cityToStr(resource.startCity) }}</el-descriptions-item>
            <el-descriptions-item label="到达城市">{{ cityToStr(resource.destCity) }}</el-descriptions-item>
            <el-descriptions-item label="出发地址">{{ resource.startAddress }}</el-descriptions-item>
            <el-descriptions-item label="到达地址">{{ resource.destAddress }}</el-descriptions-item>
            <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
            <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

            <el-descriptions-item label="订单状态">
              <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                  orderStateStr[record.orderState]
                }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button type="primary" plain @click="showQrcode = true">出示凭证</el-button>
              <el-button
                  type="warning"
                  plain
                  :disabled="record.orderState != 0"
                  @click="cancelOrder(record)"
              >取消订单
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" plain @click="addNewContact('supplier',resource.supplierId)">咨询商家</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" v-if="snapshot.changeTime==null" plain
                         @click="$router.push(`/user/detail/${productTypeStr[resource.productType]}/${resource.trafficId}`)">
                查看商品
              </el-button>
              <el-button type="primary" v-else plain
                         @click="$router.push(`/user/detail/snapshot/${record.snapshotId}`)">
                查看交易快照
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card v-if="productType=='hotel'" class="box-card" v-for="record in hotelList"
                 :key="record.consumerRecordId">
          <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
            <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
            <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
            <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
            <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
            <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
            <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

            <el-descriptions-item label="订单状态">
              <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                  orderStateStr[record.orderState]
                }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button type="primary" plain @click="showQrcode = true">出示凭证</el-button>
              <el-button
                  type="warning"
                  plain
                  :disabled="record.orderState != 0"
                  @click="cancelOrder(record)"
              >取消订单
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" plain @click="addNewContact('supplier',resource.supplierId)">咨询商家</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" v-if="snapshot.changeTime==null" plain
                         @click="$router.push(`/user/detail/${productTypeStr[resource.productType]}/${resource.resourceId}`)">
                查看商品
              </el-button>
              <el-button type="primary" v-else plain
                         @click="$router.push(`/user/detail/snapshot/resource/${record.snapshotId}`)">
                查看交易快照
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card v-if="productType=='scenic'" class="box-card" v-for="record in scenicList"
                 :key="record.consumerRecordId">
          <el-descriptions :declare-var1="snapshot = record.snapshot" :declare-var2="resource = snapshot.json">
            <el-descriptions-item label="订单号">{{ record.consumeRecordId }}</el-descriptions-item>
            <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
            <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
            <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
            <el-descriptions-item label="购买数量">{{ record.buyNum }}</el-descriptions-item>
            <el-descriptions-item label="付款金额">{{ record.buyNum * record.price }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ record.orderTime }}</el-descriptions-item>

            <el-descriptions-item label="订单状态">
              <el-tag class="ml-2" :type="orderStateTagType[record.orderState]">{{
                  orderStateStr[record.orderState]
                }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button type="primary" plain @click="showQrcode = true">出示凭证</el-button>
              <el-button
                  type="warning"
                  plain
                  :disabled="record.orderState != 0"
                  @click="cancelOrder(record)"
              >取消订单
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" plain @click="addNewContact('supplier',resource.supplierId)">咨询商家</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" v-if="snapshot.changeTime==null" plain
                         @click="$router.push(`/user/detail/${productTypeStr[resource.productType]}/${resource.resourceId}`)">
                查看商品
              </el-button>
              <el-button type="primary" v-else plain
                         @click="$router.push(`/user/detail/snapshot/resource/${record.snapshotId}`)">
                查看交易快照
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-main>
    </el-container>
  </div>


  <!--  <el-collapse>-->
  <!--    <el-collapse-item title="火车票">-->
  <!--      -->
  <!--    </el-collapse-item>-->
  <!--    <el-collapse-item title="机票">-->
  <!--      -->
  <!--    </el-collapse-item>-->
  <!--    <el-collapse-item title="门票">-->
  <!--      -->
  <!--    </el-collapse-item>-->
  <!--    <el-collapse-item title="酒店">-->
  <!--      -->
  <!--    </el-collapse-item>-->
  <!--  </el-collapse>-->

  <el-dialog v-model="showQrcode" title="显示凭证" width="30%" destroy-on-close :center="true">
    <el-image :src="axios.defaults.baseURL + 'qrcode'"></el-image>
  </el-dialog>
</template>

<script setup>
import axios from "~/config/axios";
import {computed, onBeforeMount, ref, toRef, watch} from "vue";
import {addNewContact, cityToStr, getProductType, showSuccessAndReload} from "~/config/utils.js";
import {orderStateStr, orderStateTagType, productTypeStr, productTypeCode} from "~/config/const.js";
import router from "~/config/router.js";
import {useRoute} from "vue-router";

const recordList = ref([]);
const trainList = ref([])
const flightList = ref([])
const hotelList = ref([])
const scenicList = ref([])
watch(recordList, () => {
  trainList.value = [], flightList.value = [], hotelList.value = [], scenicList.value = []
  recordList.value.forEach(r => {
    if (r.productType == productTypeCode.train) {
      trainList.value.push(r)
    } else if (r.productType == productTypeCode.flight) {
      flightList.value.push(r)
    } else if (r.productType == productTypeCode.hotel) {
      hotelList.value.push(r)
    } else if (r.productType == productTypeCode.scenic) {
      scenicList.value.push(r)
    }
  })
})
onBeforeMount(() => {
  axios.get("/records").then((res) => {
    recordList.value = res;
  });
})

const watchRoute = useRoute()
const productType = ref(watchRoute.params.productTypeStr)
watch(() => watchRoute.params, () => {
  productType.value = watchRoute.params.productTypeStr
})

let showQrcode = ref(false);
const cancelOrder = ({consumeRecordId, updateTime}) => {
  axios
      .put(`/record/${consumeRecordId}/${updateTime}/3`)
      .then((res) => {
        showSuccessAndReload()
      });
};
</script>


<style>
</style>